<template>
	<view class="page">

		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发布宠物遗失</block>
		</cu-custom>

		<view class="margin" style="border:1px solid #0081ff;">
			<view class="margin text-center">
				<view class="margin">宠物遗失标题</view>
				<uni-easyinput v-model="loseForm.loseTitle" placeholder="宠物遗失标题(不超过20字)" :inputBorder="true" />
			</view>
			<!-- 图片上传 -->
			<view class="margin">
				<uni-file-picker ref="files" limit="9" title="最多选择9张图片" :auto-upload="false" file-mediatype="image"
					file-extname="png,jpg" v-model="petImages" @select="selectIamge" @progress="progress"
					@success="success" @fail="fail" @delete="del">
				</uni-file-picker>
			</view>
			<view class="margin bg-blue">
				<text class="margin-top margin-left margin-right">遗失宠物信息</text>
			</view>
			<view class="margin">
				<uni-forms ref="baseForm" label-position="top">
					<uni-row :gutter="20">
						<uni-col :span="12">
							<uni-forms-item label="昵称" required>
								<uni-easyinput placeholder="请输入宠物昵称" v-model="loseForm.losePetNick"
									:inputBorder="true" />
							</uni-forms-item>
						</uni-col>
						<uni-col :span="12">
							<uni-forms-item label="年龄" required>
								<uni-easyinput placeholder="请输入宠物年龄" v-model="loseForm.losePetAge"
									:inputBorder="true" />
							</uni-forms-item>
						</uni-col>
					</uni-row>
					<uni-row :gutter="20">
						<uni-col :span="12">
							<uni-forms-item label="性别" required>
								<uni-data-select :border="true" placeholder="请选择宠物性别" v-model="loseForm.losePetSex"
									:localdata="petSexList"></uni-data-select>
							</uni-forms-item>

						</uni-col>
						<uni-col :span="12">
							<uni-forms-item label="类型" required>
								<uni-data-select :border="true" placeholder="请选择宠物星球" v-model="loseForm.losePetStar"
									:localdata="petStarList" @change="changePetStar"></uni-data-select>
							</uni-forms-item>
						</uni-col>
					</uni-row>
					<uni-row :gutter="20">
						<uni-col :span="12">
							<uni-forms-item label="品种" required>
								<uni-data-select :border="true" placeholder="请选择宠物品种" v-model="loseForm.losePetType"
									:localdata="petTypeList"></uni-data-select>
							</uni-forms-item>
						</uni-col>
						<uni-col :span="12">
							<uni-forms-item label="城市" required>
								<uni-data-picker ref="picker" placeholder="请选择城市" popup-title="请选择所在地区"
									:localdata="ChinaCitysList" v-model="loseForm.loseCity" @change="selectCity">
								</uni-data-picker>
							</uni-forms-item>

						</uni-col>
					</uni-row>
				</uni-forms>

				<!-- 宠物遗失人信息 -->
				<view class="margin-bottom-xs bg-blue">
					<text class="margin-top margin-left margin-right">宠物遗失人信息</text>
				</view>
				<view class="margin-bottom-xs">
					<uni-forms ref="baseForm">
						<uni-forms-item label="称呼" required>
							<uni-easyinput placeholder="宠物遗失人称呼" v-model="loseForm.losePetUser" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="手机" required>
							<uni-easyinput placeholder="请输入手机号" v-model="loseForm.losePhone" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="微信" required>
							<uni-easyinput placeholder="请输入微信号" v-model="loseForm.loseWechat" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="QQ" required>
							<uni-easyinput placeholder="请输入QQ号" v-model="loseForm.loseQQ" :inputBorder="true" />
						</uni-forms-item>
						<uni-forms-item label="邮箱" :inputBorder="true" required>
							<uni-easyinput placeholder="请输入邮箱地址" v-model="loseForm.loseEmail" :inputBorder="true" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>

			<!-- 遗失区域 -->
			<view class="margin" style="border-left: 3px solid #0081ff;">
				<text class="margin-top margin-left margin-right">遗失区域</text>
			</view>
			<view class="margin">
				<uni-easyinput placeholder="请输入走失区域" v-model="loseForm.loseArea" :inputBorder="true" />
			</view>
			<!-- 遗失经过 -->
			<view class="margin" style="border-left: 3px solid #0081ff;">
				<text class="margin-top margin-left margin-right">遗失经过</text>
			</view>
			<view class="margin-left-lg margin-left-lg">
				<uni-easyinput maxlength="-1" type="textarea" autoHeight v-model="loseForm.losePetCourse"
					placeholder="请输入具体经过" :inputBorder="false"></uni-easyinput>
			</view>
		</view>
		<!-- 底部占位 -->
		<view style="height: 150rpx;"></view>
		<!-- 底部悬浮发布按钮 -->
		<view class="margin" style="position: fixed;bottom: 0;width: 100%;">
			<uni-row>
				<uni-col :span="4">
					<view style="height: 50rpx;"></view>
				</uni-col>
				<uni-col :span="16">
					<view class="senBtn">
						发布
					</view>
				</uni-col>
				<uni-col :span="4">
					<view style="height: 50rpx;"></view>
				</uni-col>
			</uni-row>
		</view>

		<!-- 添加宠物星球 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="添加宠物星球" :value="petStarform.starName"
				placeholder="星球名称" @confirm="addPetSatr"></uni-popup-dialog>
		</uni-popup>


	</view>
</template>

<script>
	import {
		listStar,
		getStar,
		addStar
	} from "@/api/pets/star";
	import {
		listType
	} from "@/api/pets/type.js"
	import config from "@/config.js";
	import ChinaCity from "@/static/data/ChinaCitysData.js"
	import {
		getToken
	} from '@/utils/auth'
	import {
		listCondition
	} from '@/api/pets/condition.js'

	const baseUrl = config.baseUrl;
	var tempFilePath = '';

	export default {
		data() {
			return {
				loseUserPicture: '',
				loseUserName: '',
				//中国省份列表
				ChinaCitysList: ChinaCity.data,
				loseForm: {
					//宠物领养标题
					loseTitle: null,
					//丢失宠物昵称
					losePetNick: null,
					//宠物性别
					losePetSex: null,
					// 宠物年龄
					losePetAge: null,
					// 宠物星球
					losePetStar: null,
					// 宠物类型
					losePetType: null,
					// 丢失城市
					loseCity: null,
					// 丢失人称呼
					losePetUser: null,
					//
					loseUserPicture: null,
					// 联系手机
					losePhone: null,
					// 联系微信
					loseWechat: null,
					// 联系QQ
					loseQQ: null,
					// 联系邮箱
					loseEmail: null,
					// 丢失区域
					loseArea: null,
					// 丢失经过
					losePetCourse: null,
				},
				//宠物图片
				petImages: [],
				//宠物性别列表
				petSexList: [{
						value: 0,
						text: '女孩'
					},
					{
						value: 1,
						text: '男孩'
					},
					{
						value: 3,
						text: '未知'
					}
				],
				//宠物星球列表
				petStarList: [],
				//宠物品种列表
				petTypeList: [],
				//所在城市列表
				petCityList: [],
				//领养条件列表
				tagList: [],
				//添加宠物星球表单
				petStarform: {
					starImages: null,
					starName: null,
					remark: null
				},
				// 查询参数
				queryParams: {
					starId: null,
					typeName: null,
				},
			}
		},
		created() {
			this.getPetStarList();
		},
		methods: {
			//获取宠物星球
			getPetStarList() {
				var petStartList = [];
				listStar().then(res => {
					res.rows.forEach(item => {
						petStartList.push({
							value: item.starId,
							text: item.starName
						})
					})
					petStartList.push({
						value: 0,
						text: '其他',
					});
					this.petStarList = petStartList;
				})
			},
			//选择宠物星球
			changePetStar(e) {
				this.queryParams.starId = e;
				this.petTypeList = [];
				this.loseForm.losePetType = '';
				if (e === 0) {
					this.$refs.inputDialog.open()
				}
				if (e != 0) {
					listType(this.queryParams).then(res => {
						res.rows.forEach(item => {
							this.petTypeList.push({
								value: item.typeId,
								text: item.typeName
							})
						})
						if (this.petTypeList.length > 0) {
							this.loseForm.losePetType = this.petTypeList[0].value;
						}
					})
				}
			},
			// 选择城市
			selectCity(e) {
				this.loseForm.loseCity = e.detail.value[0].text + '-' + e.detail.value[1].text + '-' + e.detail.value[2]
					.text;
				console.log(this.loseForm)
			},
			//添加宠物星球
			addPetSatr() {
				if (val != null) {
					this.petStarform.starName = val;
					this.petStarform.remark = '移动端添加';
					addStar(this.petStarform).then(response => {
						this.$modal.msgSuccess("新增成功");
						this.getAllPetStars();
						setTimeout(() => {
							let index = this.petStartList.length;
							this.loseForm.losePetStar = this.petStartList[index - 2].value;
						}, 1000)
					});
				} else {
					uni.showLoading({
						title: '名称不能为空'
					})
					setTimeout(() => {
						uni.hideLoading();
						this.loseForm.losePetStar = '';
						this.$refs.inputDialog.close();
					}, 500)
				}
			},
		}
	}
</script>

<style>
	.senBtn {
		background-color: #0081ff;
		text-align: center;
		height: 80rpx;
		width: 100%;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: aliceblue;
	}
</style>